<template>
  <el-container>
    <el-main>
      <div class="myBox">
        <div id="sliderLeft">
          <div class="menuList">
            <div class="app-container">
              <!-- <ul id="treeDemo" class="ztree" /> -->
              <el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" @check="checkChange">
              </el-tree>
            </div>
          </div>
        </div>
        <div class="moveBtn" v-move></div>
        <div class="sliderRight">
          <!-- <real-map ref="realMap"></real-map> -->
          <!-- 高德地图 -->
          <road-conditions-map ref="map"></road-conditions-map>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
// import RealMap from './components/real-map.vue';
import RoadConditionsMap from './components/road-conditions-map.vue';
// import treeData from './tree.json'
import treeData1 from './tree1.json'

export default {
  directives: {
    move(el) {
      el.onmousedown = function (e) {
        var init = e.clientX;
        var parent = document.getElementById("sliderLeft");
        var initWidth = parent.offsetWidth;
        document.onmousemove = function (e) {
          var end = e.clientX;
          var newWidth = end - init + initWidth;
          parent.style.width = newWidth + "px";
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;
        };
      };
    }
  },
  data() {
    return {
      setting: {
        data: {
          simpleData: {
            enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
            idKey: "id",  //节点数据中保存唯一标识的属性名称
            // pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称  
            // rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
          },
          key: {
            name: "name"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
          }
        },
        check: {
          enable: true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
          nocheckInherit: true  //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 
        },
        callback: {
          onCheck: this.zTreeOnCheck
        }
      },
      // zNodes: treeData,
      // includeParentChecked: [],
      // noIncludeParentChecked: [],      checkedNodes: [],
      currentChooseNode: null,
      data: treeData1,
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  components: {
    // RealMap,
    RoadConditionsMap
  },
  mounted() {
    // $.fn.zTree.init($('#treeDemo'), this.setting, this.zNodes);
    // setTimeout(() => {
    //   console.log('setTimeout');
    //   this.$nextTick(() => {
    //     this.zNodes = treeData1
    //   })
    // }, 5000);
  },
  created() { },
  updated() { },
  methods: {
    add() {
      this.$refs.realMap.toCoordinate()
    },
    zTreeOnCheck() {
      // console.log(event, treeId, treeNode);
      const zTree = $.fn.zTree.getZTreeObj("treeDemo");

      const changedNodes = zTree.getChangeCheckedNodes(); //获取改变的全部结点
      const checkNodes = changedNodes.filter(item => item.level == 2)
      console.log('changedNodes', changedNodes, checkNodes);
    },
    /**
     * 
     * @param {*} data 当前节点
     * @param {*} node node.checkedNodes选中的节点数组
     */
    checkChange(data, node) {
      // console.log(node.checkedNodes, data);
      const checkedNodes = node.checkedNodes.filter(item => item.location).map(item => {
        return {
          ...item,
          lnglat: [item.location.lng, item.location.lat]
        }
      })
      this.currentChooseNode = data
      // this.checkedNodes = checkedNodes
      // this.$emit('monitorCarChange', node.checkedNodes, data)
      this.$refs.map.addMarkers(checkedNodes, data)
    },
    filterNode(value, data) {
      if (!value) {
        return true;
      } else {
        return data.name.indexOf(value) !== -1;
      }
    },
  }
};
</script>

<style lang="less" scoped>
.myBox {
  width: calc(100vw - 20px);
  height: calc(100vh - 76px);
  display: flex;
  padding: 10px 10px;
  overflow: hidden;
  background-color: #F0F1F3;
}

#sliderLeft {
  // width: 250px;
  // height: 100%;
  // position: relative;
  /* overflow-y: auto; */
  display: flex;
  border: 1px solid #AEBAC5;
  border-radius: 0px;
  overflow: auto;
  width: 20%;
  background-color: #fff;
}

.menuList {
  width: 100%;
}

/* 拖动条 */
.moveBtn {
  height: 100%;
  width: 10px;
  /* opacity: 0; */
  // position: absolute;
  // right: 0px;
  // top: 0;
  cursor: col-resize;
  background-color: transparent;
}

.sliderRight {
  // height: 100%;
  background-color: #fff;
  border: 1px solid #AEBAC5;
  flex: 1;
}

.item {
  width: 100px;
  height: 50px;
  background-color: aqua;
  border-right: 1px solid;
  white-space: nowrap;
  display: inline-block;
}

.scroll {
  text-align: center;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

.app-container {
  overflow-x: scroll;
  display: grid;
  height: 100%;
}
</style>

